<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../plugins/elementui/lib/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理<small>预约设置</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-right: 20px" type="primary"
                                   @click="downloadTemplate()">模板下载
                        </el-button>
                        <el-upload action="/api/manage/orderSet/upload"
                                   name="excelFile"
                                   :headers="headers"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>
                <!--日历控件-->
                <div class="calendar">


                    <el-calendar v-model="selectedDate">
                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                        <template slot="dateCell" slot-scope="{date, data}">
                            <p>
                                {{ data.day.split('-').slice(1).join('-') }}
                            </p>
                            <template v-if="date > today">
                                <template v-if="orderSetData[data.day] != null">
                                    <template
                                            v-if="orderSetData[data.day]?.number > orderSetData[data.day]?.reservations">
                                        <div style="color: #1ed7fc; font-size: 12px; text-align: center;">
                                            <p>可预约{{orderSetData[data.day]?.number }}人</p>
                                            <p>已预约{{orderSetData[data.day]?.reservations }}</p>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div style="color: #ff9c9d; font-size: 12px; text-align: center;">
                                            <p>可预约{{orderSetData[data.day]?.number }}人</p>
                                            <p>已预约{{orderSetData[data.day]?.reservations }}</p>
                                            <p>已满</p>
                                        </div>
                                    </template>
                                </template>
                                <div style="background: #1ed7fc;">
                                    <button v-if="date > today" @click="handleOrderSet(date)" class="ordersetbtn">
                                        设置
                                    </button>
                                </div>
                            </template>
                        </template>
                    </el-calendar>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/lib/index.js"></script>
<script src="../plugins/elementui/lib/calendar.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/common.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            selectedDate: new Date(),
            today: new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            currentYear: 2025,
            headers: {},
            orderSetData: {}
        },
        watch: {
            selectedDate(newVal, oldVal) {
                if (newVal.getMonth() != oldVal.getMonth()) {
                    this.initData(newVal);
                }
            }
        },
        created: function () {//在vue初始化时调用
            this.initData();
            // this.leftobj = [
            //     { date: 1, number: 120, reservations: 1 },
            //     { date: 3, number: 120, reservations: 1 },
            //     { date: 4, number: 120, reservations: 120 },
            //     { date: 6, number: 120, reservations: 1 },
            //     { date: 8, number: 120, reservations: 1 }
            // ];
            this.headers.token = localStorage.getItem('token');
        },
        methods: {
            //预约设置
            handleOrderSet(day) {
                this.$prompt('请输入可预约数量', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]*[1-9[0-9]*$/,
                    inputErrorMessage: '只能输入正整数'
                }).then(({value}) => {
                    //根据日期修改可预约人数
                    let orderDate = this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate());
                    axios.put(`/orderSet`, {orderDate: orderDate, number: value}).then(response => {
                        if (response.flag) {
                            //如果修改成功
                            this.initData(this.selectedDate);
                            this.$message.success("操作成功");
                        } else {
                            this.$message.error(response.errMsg);
                        }
                    })
                }).catch(() => {
                    this.$message.warning("操作取消");
                });
            },
            //上传之前进行文件格式校验
            beforeUpload(file) {
                const isXLS = file.type === 'application/vnd.ms-excel';
                if (isXLS) {
                    return true;
                }
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是xls或者xlsx格式!');
                return false;
            },
            //下载模板文件
            downloadTemplate() {
                window.location.href = "../template/order_set.xlsx";
            },
            //上传成功提示
            handleSuccess(response, file) {
                if (response.flag) {
                    this.initData(null);
                    this.$message.success("上传成功");
                } else {
                    this.$message.error(response.errMsg);
                }
                console.log(response, file, fileList);
            },
            //初始化当前页要展示的日期
            initData: function (cur) {
                this.currentYear = this.today.getFullYear();
                this.currentMonth = this.today.getMonth() + 1;
                this.currentDay = this.today.getDate();

                if (cur != null) {
                    this.currentYear = cur.getFullYear();
                    this.currentMonth = cur.getMonth() + 1;
                    this.currentDay = cur.getDate();
                }

                axios.get(`/orderSet/getCalendarData?currentYear=${this.currentYear}&currentMonth=${this.currentMonth}`).then(response => {
                    this.orderSetData = response.data;
                    response.data.forEach(orderset => {
                        //this.orderSetData[orderset.date] = JSON.parse(JSON.stringify(orderset));
                        this.$set(this.orderSetData, orderset.date, JSON.parse(JSON.stringify(orderset)));
                    });
                })
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                let y = year;
                let m = month;
                if (m < 10) m = "0" + m;
                let d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    })
</script>
</html>